<script>
import { getRemoteMachines, cleanData, generateData } from "../api/machineApi";
import { ElMessage } from "element-plus";

export default {
    name: "MachinePage",

    data() {
        return {
            machines: [],
            dialog: {
                generateData: {
                    visible: false,
                    title: "生成数据",
                    form: {
                        machineUuid: "",
                        loginUrl: "",
                        adminLoginData: "",
                        hisLoginData: "",
                        outpatientDoctorLoginData: "",
                        inpatientDoctorLoginData: "",
                        inpatientNurseLoginData: "",
                    }
                },
                cleanData: {
                    visible: false,
                    title: "清理数据",
                    form: {
                        machineUuid: "",
                    }
                }
            }
        };
    },

    computed:  {
        idleMachines() {
            return this.machines.filter(machine => machine.machineStatus === "空闲");
        },

    },

    async mounted() {
        this.machines = (await getRemoteMachines()).data.map(machine => {
            if (machine.machineStatus === "idle") {
                machine.machineStatus = "空闲";
            } else if (machine.machineStatus === "busy") {
                machine.machineStatus = "忙碌";
            } else {
                machine.machineStatus = "未知";
            }
            machine.lastUpdateTime = new Date(machine.lastUpdateTime).toLocaleString();
            return machine;
        });
    },

    methods: {

        async handleClickRefreshButton() {
            this.machines = (await getRemoteMachines()).data.map(machine => {
                if (machine.machineStatus === "idle") {
                    machine.machineStatus = "空闲";
                } else if (machine.machineStatus === "busy") {
                    machine.machineStatus = "忙碌";
                } else {
                    machine.machineStatus = "未知";
                }
                machine.lastUpdateTime = new Date(machine.lastUpdateTime).toLocaleString();
                return machine;
            });
        },
        async handleClickCleanDataButton(row) {
            this.dialog.cleanData.form.machineUuid = row.machineUuid;
            this.dialog.cleanData.visible = true;
        },

        async handleClickGenerateDataButton(row) {
            this.dialog.generateData.form.machineUuid = row.machineUuid;
            this.dialog.generateData.visible = true;
        },

        async handleSubmitCleanDataForm() {
            if (!this.dialog.cleanData.form.machineUuid) {
                ElMessage({
                    message: "请选择执行机",
                    type: "warning"
                });
                return
            }
            await cleanData(this.dialog.cleanData.form);
            ElMessage({
                message: "提交清除数据成功",
                type: "success"
            });
            this.dialog.cleanData.visible = false;
        },

        async handleSubmitGenerateDataForm() {
            if (!(this.dialog.generateData.form.machineUuid
                && this.dialog.generateData.form.loginUrl)) {
                ElMessage({
                    message: "请填写完整",
                    type: "warning"
                });
                return;
            }
            if (!(this.dialog.generateData.form.hisLoginData && this.dialog.generateData.form.outpatientDoctorLoginData)) {
                ElMessage({
                    message: "门诊数据可能不全",
                    type: "warning"
                });
            }
            if (!(this.dialog.generateData.form.adminLoginData
                && this.dialog.generateData.form.hisLoginData
                && this.dialog.generateData.form.inpatientDoctorLoginData
                && this.dialog.generateData.form.inpatientNurseLoginData)) {
                ElMessage({
                    message: "住院数据可能不全",
                    type: "warning"
                });
            }
            await generateData({
                machineUuid: this.dialog.generateData.form.machineUuid,
                loginUrl: this.dialog.generateData.form.loginUrl,
                adminLoginData: JSON.parse(this.dialog.generateData.form.adminLoginData),
                hisLoginData: JSON.parse(this.dialog.generateData.form.hisLoginData),
                outpatientDoctorLoginData: JSON.parse(this.dialog.generateData.form.outpatientDoctorLoginData),
                inpatientDoctorLoginData: JSON.parse(this.dialog.generateData.form.inpatientDoctorLoginData),
                inpatientNurseLoginData: JSON.parse(this.dialog.generateData.form.inpatientNurseLoginData),
            });
            ElMessage({
                message: "提交生成数据成功",
                type: "success"
            });
            this.dialog.cleanData.visible = false;
        },
    }
}
</script>

<template>
    <div class="machine-page">
        <div class="toolbar">
            <el-button @click="handleClickRefreshButton" class="refresh-button">
                刷新列表
            </el-button>
        </div>
        <div class="table-container">
            <el-table :data="machines" class="machine-table" height="100%">
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="machineUuid" label="uuid" width="300"></el-table-column>
                <el-table-column prop="machineName" label="远程机名称" width="200"></el-table-column>
                <el-table-column prop="machineStatus" label="状态" width="150"></el-table-column>
                <el-table-column prop="lastUpdateTime" label="最后更新时间" width="200"></el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" @click="handleClickCleanDataButton(row)" class="action-button"
                            size="small">清理数据</el-button>
                        <el-button type="primary" @click="handleClickGenerateDataButton(row)" class="action-button"
                            size="small">生成数据</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-dialog v-model="dialog.cleanData.visible" :title="dialog.cleanData.title" class="custom-dialog">
                <el-form :model="dialog.cleanData.form" label-width="100px">
                    <el-form-item label="远程机">
                        <el-select v-model="dialog.cleanData.form.machineUuid" placeholder="请选择远程机">
                            <el-option v-for="machine in idleMachines" :key="machine.machineUuid"
                                :label="machine.machineName" :value="machine.machineUuid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button @click="dialog.cleanData.visible = false">取消</el-button>
                        <el-button type="primary" @click="handleSubmitCleanDataForm">提交</el-button>
                    </div>
                </el-form>
            </el-dialog>
            <el-dialog v-model="dialog.generateData.visible" :title="dialog.generateData.title" class="custom-dialog">
                <el-form :model="dialog.generateData.form" label-width="100px">
                    <el-form-item label="远程机">
                        <el-select v-model="dialog.generateData.form.machineUuid" placeholder="请选择远程机">
                            <el-option v-for="machine in idleMachines" :key="machine.machineUuid"
                                :label="machine.machineName" :value="machine.machineUuid">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="登录接口">
                        <el-input v-model="dialog.generateData.form.loginUrl" placeholder="请输入登录接口" />
                    </el-form-item>
                    <el-form-item label="管理员">
                        <el-input v-model="dialog.generateData.form.adminLoginData" placeholder="请输入登录数据"
                            type="textarea" :rows="5" />
                    </el-form-item>
                    <el-form-item label="HIS">
                        <el-input v-model="dialog.generateData.form.hisLoginData" placeholder="请输入登录数据" type="textarea"
                            :rows="5" />
                    </el-form-item>
                    <el-form-item label="门诊医生">
                        <el-input v-model="dialog.generateData.form.outpatientDoctorLoginData" placeholder="请输入登录数据"
                            type="textarea" :rows="5" />
                    </el-form-item>
                    <el-form-item label="住院医生">
                        <el-input v-model="dialog.generateData.form.inpatientDoctorLoginData" placeholder="请输入登录数据"
                            type="textarea" :rows="5" />
                    </el-form-item>
                    <el-form-item label="住院护士">
                        <el-input v-model="dialog.generateData.form.inpatientNurseLoginData" placeholder="请输入登录数据"
                            type="textarea" :rows="5" />
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button @click="dialog.generateData.visible = false">取消</el-button>
                        <el-button type="primary" @click="handleSubmitGenerateDataForm">提交</el-button>
                    </div>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<style scoped>
.machine-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 0;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 20px;
}

.refresh-button {
    background-color: #409EFF;
    border-color: #409EFF;
    color: white;
}

.refresh-button:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
    color: white;
}

.table-container {
    flex: 1;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.machine-table {
    border: none;
    flex: 1;
}

.machine-table :deep(.el-table__header th) {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
}

.action-button {
    padding: 6px 12px;
    margin-right: 8px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.custom-dialog :deep(.el-dialog__header) {
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
}

.custom-dialog :deep(.el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.custom-dialog :deep(.el-dialog__body) {
    padding: 20px;
}

.custom-dialog :deep(.el-textarea__inner) {
    font-family: monospace;
}
</style>